<template>
	<div>
		<div class="head">
			<div @click="$router.push({name:'Login'})" class="return"></div>
			<span>忘记密码</span>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="title-hd">找回密码</div>
				<div class="main">
					<group>
						<x-input placeholder="请输入手机号" :max="12" v-model.trim="Account" text-align="left" type="tel"></x-input>
					</group>
					<group>
						<x-input class="weui-vcode" :show-clear="false" v-model.trim="validateCode" placeholder="请输入验证码" :max="6" type="email">
							<x-button slot="right" v-text="validateCodeWord" @click.native='validateMobileOrEmailExist' type="primary" mini :disabled="show">获取</x-button>
						</x-input>
					</group>
					<group>
						<x-input placeholder="请输入新密码" v-model.trim="Pwd" text-align="left" type="password" :max="18"></x-input>
					</group>
					<group>
						<x-input placeholder="请输入新确认密码" v-model.trim="Pwd2" text-align="left" type="password" :max="18"></x-input>
					</group>
				</div>
				<div class="btn">
					<x-button type="primary" @click.native="Find" :show-loading="subDisabled">找回</x-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { Toast } from 'vant';
	import { base } from './../../utils/api';
	export default {
		name: 'FindPwd',
		data() {
			return {
				subDisabled: false,
				Account: '', // 账号
				validateCode: '', // 验证码
				Pwd: '', // 密码
				Pwd2: '', // 确认密码
				show: false,
				timer: null,
				v: '', // 凭证
				k: '',
				agreeId: 0,
				validateCodeNum: '300', // 倒计时时间
				validateCodeDisabled: true, // 防止重复点击
				validateCodeWord: '发送验证码'
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.$vux.loading.show({
				text: '加载中...'
			})
		},
		watch: { // 这里的验证请勿注释（如果要设置IOS不能输入中文，请更改type的值为email，安卓的话就需要下面的这些限制）
			Pwd: function() {
				this.Pwd = this.Pwd.replace(/[\u4e00-\u9fa5]/ig, ' '); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			Pwd2: function() {
				this.Pwd2 = this.Pwd2.replace(/[\u4e00-\u9fa5]/ig, ' '); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			Account: function() {
				this.Account = this.Account.replace(/[^\d]/g, ' '); // 因为帐号是手机号，手机号只能是数字，且中国电信手机号码最长为12位，上面不能限制为11位
			},
			validateCode: function() {
				this.validateCode = this.validateCode.replace(/[\u4e00-\u9fa5]/ig, ' '); // 短信验证码不能输入中文
			}
		},
		methods: {
			Find() {
				// 判断手机号码
				if(!this.Account) {
					Toast('手机号码不能为空');
					return false;
				}
				// 判断短信验证码
				if(!this.validateCode) {
					Toast('短信验证码不能为空');
					return false;
				}
				// 判断密码和确认密码
				if(this.Pwd == '') {
					Toast('新密码不能为空');
					return false;
				} else {
					if(this.Pwd.length < 6 || this.Pwd.length > 18) {
						Toast('密码长度在6-18之间');
						return false;
					}
				}
				if(this.Pwd != this.Pwd2) {
					Toast('输入密码不一致，请重新输入');
					return false;
				}
				// 找回密码
				base.getForgetPwd({
					'validateType': this.Account,
					'unifiedCode': this.validateCode,
					'password': this.Pwd,
					'confirmPass': this.Pwd2,
				}).then(res => {
					if(res.code == 500) {
						this.subDisabled = false;
					} else if(res.code == 200) {
						this.subDisabled = false;
						setTimeout(() => {
							this.$router.push('/Login');
						}, 1000);
					}
					Toast(res.msg);
				})
			},
			// 获取验证码
			validateMobileOrEmailExist() {
				// 判断账号
				if(!this.Account) {
					Toast('手机号码不能为空');
					return false;
				}
				if(this.validateCodeDisabled) {
					// 获取验证码
					base.getCredentials().then(res => {
						if(res.code == 200) {
							this.k = res.data.k;
							this.axios.defaults.headers['deviceId'] = this.k;
							base.getCode({
								'validateType': this.Account
							}).then(res => {
								if(res.code == 200) {
									Toast(res.msg);
									this.validateCodeWord = this.validateCodeNum;
									this.validateCodeNum = '300';
									setInterval(this.countDown, 1000);
									this.validateCodeDisabled = false;
								} else {
									Toast('发送失败！');
									// 防止重复点击
									this.validateCodeDisabled = true;
								}
							})
						}
					})
				}
			},
			// 倒计时
			countDown() {
				if(this.validateCodeNum != '0') {
					this.validateCodeNum--;
					this.validateCodeWord = this.validateCodeNum;
				} else {
					this.validateCodeWord = '发送验证码';
					clearInterval(this.countDown);
					// 防止重复点击
					this.validateCodeDisabled = true;
				}
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.overlay {
		background: #fff;
	}
	
	.title {
		font-size: 15px;
		padding: 10px;
		text-align: right;
	}
	
	.title-hd {
		font-size: 20px;
		font-weight: bold;
		padding: 20px;
	}
	
	// /deep/ .weui-cells{
	// 	background:#000 !important;
	// }
	.weui-cells:after {
		left: 15px;
		right: 15px;
	}
	
	.weui-cells .weui-cell {
		padding: 15px 0;
	}
	
	.main {
		margin: 0 20px;
		border-radius: 10px;
		overflow: hidden;
	}
	
	.btn {
		padding: 20px;
	}
	
	.text {
		color: #636363;
		padding: 20px;
		text-align: center;
		font-size: 13px;
	}
	
	.logo {
		width: 30%;
		display: block;
		margin: 10px auto;
	}
	
	.qr {
		position: absolute;
		right: 0;
		top: 0;
		img {
			width: 26px;
			padding: 12px;
		}
	}
	
	.Protocol {
		padding: 10px 20px;
		font-size: 12px;
		min-height: 24px;
		span {
			text-decoration: underline;
			color: #3673f7;
		}
	}
	
	/deep/ .weui-icon-circle {
		font-size: 17px;
	}
	
	/deep/ .weui-icon-success {
		font-size: 17px;
	}
	
	/deep/ .vux-check-icon>.weui-icon-success:before,
	.vux-check-icon>.weui-icon-success-circle:before {
		color: #5571f8;
	}
	
	/deep/ .weui-btn_plain-primary {
		color: #5571f8;
		border-color: #5571f8;
	}
	
	/deep/ .weui-btn_mini {
		font-size: 12px !important;
	}
	
	// 用户协议
	.checkPopup {
		font-size: 14px;
		h2 {
			text-align: center;
			padding: 10px 0;
		}
		.checkContent {
			padding: 0 10px 10px;
		}
	}
	
	input {
		padding: 15px 10px;
	}
</style>